   <template>
  <div>
    <!-- 通过判断cityList中的内容来检测让load展示与否 -->
    <loading v-if="!cityList.length"></loading>
    <div>
      <van-index-bar :index-list="indexList" highlight-color="#ff0000">
        <template v-for="item in dataList">
          <van-index-anchor
            :index="item.index"
            :key="item.index"
            style="background: #eee"
          ></van-index-anchor>
          <van-cell
            @click="chooseCity(sub.name)"
            v-for="(sub, key) in item.data"
            :title="sub.name"
            :key="sub.name + key"
          />
        </template>
      </van-index-bar>
    </div>
  </div>
</template>
 
<script>
import Loading from "@/components/Loading";
export default {
  data() {
    return {
      // 遮罩层显示与否
      // cityList为保存的城市数据列表
      cityList: [],
      // cityIndex 为城市的拼音首字母列表
      cityIndex: [],
      // dataList存储的为每一个字母及以该字母开头的城市信息
      dataList: [],
      // 符合条件的字母列表
      indexList: [],
    };
  },
  components: {
    Loading,
  },

  async created() {
    // 获取城市列表信息
    this.$store.state.footShow = false;
    let res = await this.$axios("seatSell/cityList");
    this.cityList = res.data.data.cities;

    //生成小写字母索引表
    // 大写字母的ASCII码值为65~90,小写字母为 96~122
    for (let i = 97; i <= 122; i++) {
      this.cityIndex.push(String.fromCharCode(i));
    }
    this.cityIndex.forEach((index) => {
      let tmpArr = this.cityList.filter(
        //  截取    item中的拼音字符串首字母
        // 因为有一部分城市的字母不存在，所以需要过滤出存在的城市字母是字母,tmpArr为某一字母的城市数组
        (item) => index == item.pinyin.substr(0, 1)
      );
      if (tmpArr.length > 0) {
        this.indexList.push(index);
        this.dataList.push({
          index,
          data: tmpArr,
        });
      }
    });

    console.log(res);
  },
  methods: {
    chooseCity(item) {
      console.log(item);
      // 这里应该跳转到相关的城市，但时间有限，后台不做调整
      this.$router.push(`/cinema/${item}`);
    },
  },
  beforeDestroy() {
    this.$store.state.footShow = true;
  },
};
</script>

<style>
</style>